<template>
    <div class="img-container" @click="jump">
        <div class="img-mask center" :style="{ color: fc, fontSize: fs + 'px' }">
            <div class="img-desc">名称：{{data?.movieName?data.movieName:'未知'}}</div>
            <div class="img-desc">简介：{{data?.movieDesc?data.movieDesc:'未知'}}</div>
            <div class="img-desc">类型：{{allTypes&&data? allTypes![data!.movieTypeId - 1].type :'未知' }}</div>
        </div>
        <el-image :key="url" :src="url" fit="cover" class="my-image">
            <template #error>
                <div class="image-slot">
                    <el-icon>
                        <icon-picture />
                    </el-icon>
                </div>
            </template>
        </el-image>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits, defineProps, watch, onMounted } from 'vue'
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { useStore } from 'vuex'
import router from '../router';
import dayjs from 'dayjs'
const store = useStore()
interface IImgDesc {
    movieCover: string,
    movieDesc: string,
    movieId: number,
    movieName: string,
    movieScore: number,
    movieScoreNum: number,
    movieTypeId: number,
    movieView: number
}
interface typeItem {
    id:string,
    type:string
}

const props = defineProps<{
    url: string
    data: IImgDesc | null
    date: string | ""
    fs: number | 20
    fc: string | '#ffffff',
}>()

const allTypes = JSON.parse(window.sessionStorage.getItem("allTypes")!)


onMounted(() => {

})

const jump = () => {
    router.push({
        path:'/movie', 
        query: {
            id: props.data?.movieId,
            date: dayjs().format("YYYY-MM-DD")
        }
    })
}

</script>
<style lang='scss' scoped>
.img-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.my-image {
    width: 100%;
    height: 100%;
}

.img-mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 20;
    flex-direction: column;
}

.img-desc {
    padding: 10px 0;
}

.img-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -100%;
    transition: all 0.5s;
}

.img-container:hover .img-mask {
    top: 0;
    transition: all 0.5s;
}
</style>